const { reactive, toRefs, onMounted, createApp } = Vue
const modal = {
  props: {
    state: Object
  },
  setup(props) {
    const { title, message, duration, show, to } = props.state
    const state = reactive({
      show: false,
      title: title || '',
      message: message || '',
      duration: duration || 1000
    })
    const determine = () => {
      state.show = false
      console.log(to)
      location.href = to
    }
    const cancle = () => {
      state.show = true
    }
    onMounted(() => {
      setTimeout(() => {
        state.show = true
      }, state.duration)
    })
    return {
      determine,
      cancle,
      ...toRefs(state)
    }
  },
  template: `
  <div class="notice right" v-if="this.show">
      <h3>
        <!-- <slot #title></slot> -->
        {{title}}
      </h3>
      <p>{{message}}</p>
      <div class="ui buttons">
        <button class="button" @click="determine">确定</button>
        <button class="button" @click="cancle">取消</button>
      </div>
    </div>
  `
}
export default function notice(options) {
  console.log(options)
  const app = createApp(modal, { state: options })
  const parent = document.body
  console.log(parent)
  const instance = app.mount(parent)
  return instance
}
